<template>
    <div class="navitem" @click="routejump">
        <div class="img" :class="actcolor">
            <slot name="navimg"></slot>
        </div>
        <div class="text">
            <slot name="navtext"></slot>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
// import { mapMutations } from 'vuex';
import { useStore } from 'vuex';

export default {
  name: 'Navitem',
  props: ['path'],
  setup(props) {
    const store = useStore();
    const actcolor = computed(() => {
      let i = '';
      if (props.path === store.state.basicinfor.routepath) {
        i = 'coloractive';
      }
      return i;
    });
    const router = useRouter();
    // mapMutations({ changeroute: 'CHANGEROUTE', change: 'CHANGE' });
    function routejump() {
      router.replace(props.path);
      store.commit('CHANGEROUTE', props.path);
      // changeroute(props.path);
    }

    return {
      routejump,
      actcolor,
    };
  },
};
</script>

<style>
    .navitem {
        display: flex;
        flex-direction: column;
    }
    .navitem .img span {
        font-size: 30px;
    }
    .coloractive{
        color: #e80000;
    }
    .text{
        margin-top: 3px;
    }
    .navitem .text span {
        font-size: 14px;
    }
</style>
